//轮播图
window.addEventListener('load', function () {
    let prev = document.querySelector(".prev");
    let next = this.document.querySelector(".next");
    let wrapper = document.getElementById("wrapper");
    let width = wrapper.offsetWidth;
    // 鼠标经过就显示出来
    this.wrapper.addEventListener('mouseenter', function () {
        prev.style.display = 'block';
        next.style.display = 'block';
        //清除自动播放轮播图
        clearInterval(timer);
        timer = null;
    })
    this.wrapper.addEventListener('mouseleave', function () {
        prev.style.display = 'none';
        next.style.display = 'none';
        timer = setInterval(function () {
            next.click();//手动调用点击事件

        }, 2000);
    })
    //动态生成小圆圈，有几张图片，就生成几个小圆圈
    let ul = this.wrapper.querySelector('ul');
    let ol = wrapper.querySelector('ol');
    for (let i = 0; i < ul.children.length; i++) {
        //创建li 
        let li = this.document.createElement('li');
        //创建索引号
        li.setAttribute('index', i);
        //把li插入到ol里面
        ol.appendChild(li);
        li.addEventListener('click', function () {
            //小圆圈的排他思想
            for (let i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            //谁调用该函数，this就指向谁
            this.className = 'current';
            //点击小圆圈，移动的是ul,
            let index = this.getAttribute('index');
            num = index;
            circle = index;
            animate(ul, -1480 * index);
        })
     
    
        
        

    }

    //把ol里面的第一个li设置类名为current
    ol.children[0].className = 'current';
    //克隆第一张图片(li) 放到li的最后面
    let first = ul.children[0].cloneNode(true);
    ul.appendChild(first);
    let num = 0;

    let circle = 0;
    next.addEventListener('click', function () {
        if (num == ul.children.length - 1) {
            ul.style.left = 0;
            num = 0;
        }
        num++;
        
        animate(ul, -num * width);
        circle++;
        if (circle == ol.children.length) {
            circle = 0;
        }
        //先清除其他小圆圈的current类名
        for (let i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';

        }
        ol.children[circle].className = 'current';
    })
    prev.addEventListener('click', function () {
        if (num == 0) {
            num = ul.children.length - 1;
            ul.style.left = -1480 * num;
        }
        num--;
        animate(ul, -num * width);
        circle--;
        if (circle < 0) {
            circle = ol.children.length - 1;
        }
        //先清除其他小圆圈的current类名
        for (let i = 0; i < ol.children.length; i++) {
            ol.children[i].className = '';

        }
        ol.children[circle].className = 'current';
    })
    //自动播放轮播图
    let timer = this.setInterval(function () {
        next.click();//手动调用点击事件

    }, 2000);
})

